<template>
  <div class=" set" >
    <el-descriptions
      class="margin-top"
      title="设置"
      :column="2" >
      <el-descriptions-item label="用户名" >{{$store.state.userInfo.name}}</el-descriptions-item>
      <el-descriptions-item label="用户头像" >
        <span class="nav-item dropdown no-arrow ml-1 osahan-profile-dropdown">
          <img height="50px" class="img-profile rounded-circle" :src="$store.state.userInfo.userHeader" />
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="护眼模式" ><el-switch
        v-model="iseye"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="eyeChange()">
      </el-switch></el-descriptions-item>
      <el-descriptions-item label="全屏模式" ><el-switch
        v-model="isall"
        @change="fullScreen"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch></el-descriptions-item>
      <el-descriptions-item label="备注">
        暂无
      </el-descriptions-item>
      <el-descriptions-item label="登出" ><el-button type="danger" size="mini" @click="logout">退出登录</el-button></el-descriptions-item>

    </el-descriptions>

  </div>
</template>

<script>
export default {
  data() {
    return {
      iseye: false,
      isall: false,
    };
  },
  methods: {
    fullScreen() {
      this.$emit('fullScreen', this.isall);
    },
    eyeChange() {
      this.$emit('eyeChange', this.iseye);
    },
    logout() {
      localStorage.setItem("token", "");
      localStorage.setItem("userinfo", "");
      this.$store.commit("userInfoChange", {});
      this.$message.success("退出成功！");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped lang="scss">
.set{
  height: 95vh;
  padding: 2rem;
  background: white;
}
</style>
